<template>
  <div class="wrap">
    <div class="bookOne">
      <img src='../../imgs/sun.png' alt="">
       <div class="content">
         <p>海底两万里</p>
         <p>法布尔·中信出版社</p>
         <p>添加于2018年4月15日 <span>图书简介 ></span></p>
         <p>
           <div class="readBtn">开始阅读</div>
           <div class="readBtn addBtn">+</div>
         </p>
       </div>
     </div>
     <div class="bookTwo">
      <div class="readTop">
        <div class="readTime">
         <img src='../../imgs/readTime.png' alt="">
         <div>
           <p>阅读页数</p>
           <p>40/303</p>
         </div>
       </div>
        <div class="readTime">
          <img src='../../imgs/readTime.png' alt="">
          <div>
            <p>累计阅读时间</p>
            <p>38分34秒</p>
          </div>
        </div>
      </div>

     </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      plan:false
    }
  },
  components: {

  },
  computed: {

  },

  methods: {

  },

}
</script>

<style scoped lang="less">
.wrap{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 32rpx;
  // overflow: hidden;
  .bookOne{
    border-radius:16rpx;
    margin-top:32rpx;
    margin-bottom:20rpx;
    height: 260rpx;
    background: #fff;
    display: flex;
    padding: 0 20rpx;
    justify-content: center;
    align-items: center;
    margin-bottom:20rpx;
    img{
      width:158rpx;
      height: 220rpx;
      margin-right:20rpx;
    }
    .content{
      flex:1;
      p:nth-of-type(1){
        font-size:34rpx;
        color:#222222;
      }
      p:nth-of-type(2){
        font-size:26rpx;
        color:#999;
      }
      p:nth-of-type(3){
        font-size:24rpx;
        color:#CECECE;
        span{
          float:right;
        }
      }
      .readBtn{
        background: #1387FF;
        text-align: center;
        border-radius:10rpx;
        font-size:32rpx;
        color:#fff;
        display: inline-block;
        margin-right: 10rpx;
        width:300rpx;
        height: 70rpx;
        line-height: 70rpx;
        margin-top:10rpx;

      }
      .addBtn{
        width:70rpx;
         margin-top:10rpx;
      }

    }
  }
  .bookTwo{
    border-radius:16rpx;
    margin-bottom:20rpx;
    background: #fff;
    padding-left:36rpx;
    .readTop{
      display: flex;
      .readTime{
        flex: 1;
        height: 128rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width:56rpx;
          height: 56rpx;
          margin-right:24rpx;
        }
        >div {
          flex:1;
          p:nth-of-type(1){
            font-size:24rpx;
            color:#CECECE;
          }
          p:nth-of-type(2){
            font-size:32rpx;
            color:#222222;
          }
        }
      }

    }
  }


}
</style>
